<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/my.css" rel="stylesheet" />
		<style>
			h5 {
				margin: 5px 7px;
			}
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			.mui-col-xs-3,
			.mui-control-content {
				overflow-y: auto;
				height: 100%;
			}
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
			}
			.mui-table-view .mui-media-object {
			    max-width: 66px;
			    height: 88px;
			    line-height: 88px;
			}
			.mui-table-view:after {
			    height: 0px;
			}
			.radius {
			    border-radius: 2px;
			    box-shadow: 0 2px 3px rgba(0,0,0,.2);
			}
			.mui-table-view-cell:after{
				height: 0px;
			}
	</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav bc2">
			<h1 class="mui-title">热门排行</h1>
		</header>
		<div class="mui-content mui-row mui-fullscreen">
			<div class="mui-col-xs-3 bc2">
				<div id="typeList" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
					<a class="mui-control-item mui-active" href="#content" id="click_num" type="0">人气</a>
					<a class="mui-control-item" href="#content" id="star_num" type="0">收藏</a>
					<a class="mui-control-item" href="#content" id="create_time" type="0">最新</a>
				</div>
			</div>
			<div class="mui-col-xs-9" style="border-left: 1px solid #dbdadf;">
				<div id="load" class="mui-control-content mui-active mui-table-view">
					<ul class="mui-table-view" id="content">
					</ul>
				</div>
			</div>
		</div>

	</body>
	<script src="js/config.js"></script>
	<script src="js/book.js"></script>
	<script type="text/javascript" charset="utf-8">
		var page = 1;
		var sort;
		mui.init({
			pullRefresh: {
				container: '#load', //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
				up: {
					height: 50, //可选.默认50.触发上拉加载拖动距离
					auto: false, //可选,默认false.自动上拉加载一次
					contentrefresh: "正在加载", //可选，正在加载状态时，上拉加载控件上显示的标题内容
					contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
					callback: getData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				}
			}
		});
		mui.plusReady(function() {
			mui.ajax(config.config.path + "/type", {
				type: "GET",
				dataType: "json",
				success: function(result) {
					var code = result.code;
					if (code == 200) {
						var ele = document.getElementById("typeList");
						var html = ele.innerHTML;
						for (i = 0; i < result.data.length; i++) {
							html = html + '<a class="mui-control-item" href="#content" id="'+result.data[i].id+'">'+result.data[i].name+'</a>';
						}
						ele.innerHTML = html;
						sort = "click_num";
						getData(); 
					}
				}
			});
		});

		function getData(){
			mui.ajax(config.config.path + "/book/page?page="+page+"&limit=" + config.config.bookPageSize +
				"&sort=desc&sort_column=" + sort, {
					type: "GET",
					dataType: "json",
					success: function(result) {
						var code = result.code;
						if (code == 200) {
							var table = document.body.querySelector('#content');
							if (result.data.records.length >0) {
								for (j = 0, len = result.data.records.length; j < len; j++) {
									var name = result.data.records[j].name;
									if (name.length > 11) name = name.substr(0, 10) + '...';
									var str = result.data.records[j].synopsis;
									if(!str){
										str = "";
									}
									if (str.length > 25) str = str.substr(0, 24) + '...';
									var img = result.data.records[j].picUrl;
									if(img == null || img == ''){
										img = "images/default.png";
									}
									var html =  '<div class="mui-media-object mui-pull-left radius" style="width: 66px;background:url('+img+')no-repeat,url(images/default.png)no-repeat;background-size: cover;"></div>' +
										 		'<div class="mui-media-body">' + name 
												+ '<p style="margin-top: 4px;margin-bottom: 4px;">'+result.data.records[j].author+'</p><p>'
												+ str + '</p></div>';
									
									var div = document.createElement('li');
									div.className = "mui-table-view-cell mui-media";
									div.id = result.data.records[j].id;
									div.innerHTML = html;
									table.appendChild(div);
								}
								page++;
								mui('#load').pullRefresh().endPullupToRefresh(false);
								mui('#load').pullRefresh().refresh(true);
								mui('#load').pullRefresh().enablePullupToRefresh();
								if(result.data.records.length < 9){
									mui('#load').pullRefresh().disablePullupToRefresh();
								}
							} else {
								mui('#load').pullRefresh().disablePullupToRefresh();
								mui('#load').pullRefresh().endPullupToRefresh(true);
							}
						}
					}
				});
		}

		function getData2(typeId){
			mui.ajax(config.config.path + "/book/page?page="+page+"&limit=" + config.config.bookPageSize +
				"&sort=desc&sort_column=click_num&type_id=" + typeId, {
					type: "GET",
					dataType: "json",
					success: function(result) {
						var code = result.code;
						if (code == 200) {
							var table = document.body.querySelector('#content');
							if (result.data.records.length >0) {
								for (j = 0, len = result.data.records.length; j < len; j++) {
									var name = result.data.records[j].name;
									if (name.length > 11) name = name.substr(0, 10) + '...';
									var str = result.data.records[j].synopsis;
									if(!str){
										str = "";
									}
									if (str.length > 25) str = str.substr(0, 24) + '...';
									var img = result.data.records[j].picUrl;
									if(img == null || img == ''){
										img = "images/default.png";
									}
									img = img.replace("31xiaoshuo","31xs");
									var html =  '<div class="mui-media-object mui-pull-left radius" style="width: 66px;background:url('+img+')no-repeat,url(images/default.png)no-repeat;background-size: cover;"></div>' +
										 		'<div class="mui-media-body">' + name 
												+ '<p style="margin-top: 4px;margin-bottom: 4px;">'+result.data.records[j].author+'</p><p>'
												+ str + '</p></div>';
									
									var div = document.createElement('li');
									div.className = "mui-table-view-cell mui-media";
									div.id = result.data.records[j].id;
									div.innerHTML = html;
									table.appendChild(div);
								}
								page++;
								mui('#load').pullRefresh().endPullupToRefresh(false);
								mui('#load').pullRefresh().refresh(true);
								mui('#load').pullRefresh().enablePullupToRefresh();
								if(result.data.records.length < 9){
									mui('#load').pullRefresh().disablePullupToRefresh();
								}
							} else {
								mui('#load').pullRefresh().disablePullupToRefresh();
								mui('#load').pullRefresh().endPullupToRefresh(true);
							}
						}
					}
				});
		}
		
		mui("#typeList").on('tap', '.mui-control-item', function() {
			//获取id
			sort = this.getAttribute("id");
			page = 1;
			document.body.querySelector('#content').innerHTML = "";
			var type = this.getAttribute("type");
			if(type == '0'){
				getData();
			}else{
				getData2(sort);
			}
		});

		mui("#content").on('tap', '.mui-table-view-cell', function() {
			//获取id
			var id = this.getAttribute("id");
			//传值给详情页面，通知加载新数据
			book(id);
		});
	</script>
</html>
